<template>
  <div class='top1'>
    <div class='moduleTop'>
      <span class='icon1'>+</span>
      <a-radio checked></a-radio>
      <span class='timeModule' id="m1imeModule">
        <a-date-picker @change="onChange" :allowClear="false" v-model="dataDate"
        :getCalendarContainer="(triggerNode) => triggerNode.parentNode">
          <a-icon slot="suffixIcon" type='calendar' style="color: white"/>
        </a-date-picker>
      </span>

      <span class='module1Icon'></span>
      <a-radio :checked="currentRadio === 1" @click="currentRadio = (currentRadio === 1 ? 0 : 1)"></a-radio>
      <span class='module1Icon2 iconfont icon-a-ziyuan11'></span>
      <span class='module1Title'>盐田工厂</span>

      <span class='module2Icon'></span>
      <a-radio :checked="currentRadio === 2" @click="currentRadio = (currentRadio === 2 ? 0 : 2)"></a-radio>
      <span class='module2Icon2 iconfont icon-a-ziyuan11'></span>
      <span class='module2Title'>龙华工厂</span>

      <!-- <a-radio style="margin-left: 40px" :checked="autoChange" @click="autoChange = !autoChange"></a-radio>
      <span class='module2Title' style="color: #FFF;">自动切换</span> -->
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  components: {},
  data(){
    return {
      currentNav: '',
      currentRadio: 0,
      dataDate: null,
      autoChange: true,
      autoTimes: [],
      indexNow: 1
    }
  },
  watch: {
    currentRadio (val) {
      if (val === 1) {
        this.$emit('requestData', {dataTime: this.dataDate, factory: '盐田工厂'})
        return
      }
      if (val === 2) {
        this.$emit('requestData', {dataTime: this.dataDate, factory: '龙华工厂'})
        return
      }
      if (val === 0) {
        this.$emit('requestData', {dataTime: this.dataDate})
      }
    },
    autoChange (val) {
      if (val) {
        this.autoChangeTime()
      }
    }
  },
  created () {
    this.dataDate = this.util.timeFormat3B(new Date().toLocaleDateString())
    let date = new Date(new Date().toLocaleDateString()).getTime()
    for(let i = 0; i < 3; i++) {
      this.autoTimes.push(this.util.timeFormat3B(new Date(date - (i * 3600 * 24 * 1000)).toLocaleDateString()))
    }
    // this.autoChangeTime()
  },
  methods: {
    autoChangeTime () {
      // this.requestData({dataTime: this.autoTimes[this.indexNow]})
      if (!this.autoChange) return
      let timeOut = setTimeout(() => {
        if (!this.autoChange) return
        window.clearTimeout(timeOut)
        this.dataDate = this.autoTimes[this.indexNow]
        this.$emit('requestData', {dataTime: this.autoTimes[this.indexNow]})
        this.indexNow++
        if (this.indexNow > 2) {
          this.indexNow = 0
        }
        this.autoChangeTime()
      }, 5000)
    },
    moment,
    onChange(date, dateString) {
      this.dataDate = dateString
      this.$emit('requestData', {dataTime: this.dataDate})
    }
  }
}
</script>
<style lang='less'>

.top1 {
  padding: 10px 0;

  .moduleTop {
    display: flex;
    align-items: center;
    .ant-radio-inner{
      background-color: unset;
      border-color: #1890ff;
    }
    .icon1 {

    }

    .timeModule {
      font-size: 16px;
      font-weight: 400;
      color: #DDDDDD;

      width: 140px;
      height: 25px;
      background: #003A8C;
      border-radius: 4px;

      display: flex;
      justify-content: center;
      align-items: center;
      .ant-input{
        height: 25px;
        background-color: transparent;
        border: unset;
        color: white;
      }
      .timeModuleText {

      }

      .timeModuleIcon {

      }
    }


    .module1Icon {
      margin-right: 100px;

    }

    .module1Icon2 {
      text-align: center;
      line-height: 24px;
      width: 24px;
      height: 24px;
      font-size: 18px;
      color: #FFA40C;
      margin-right: 10px;
    }

    .module1Title {
      font-size: 20px;
      font-weight: 400;
      color: #DDDDDD;
    }

    .module2Icon {
      margin-right: 100px;

    }

    .module2Icon2 {
      text-align: center;
      line-height: 24px;
      width: 24px;
      height: 24px;
      font-size: 18px;
      color: #50ACFF;
      margin-right: 10px;
    }

    .module2Title {
      font-size: 20px;
      font-weight: 400;
      color: #DDDDDD;
    }

  }

}

</style>
